<template>
	<el-row class="container">
		<el-col type="flex" class="header">
			<el-col style="width:auto" class="logo">
		<img :src="company.logoUrl" />
				<span>{{company.name}}</span>
			</el-col>
			<el-col style="width:auto">
				<el-menu :default-active="topId" class="el-menu-demo" mode="horizontal" theme="dark" @select='selTop'>
					<template v-for="(item,index) in topMenuArray" v-if="!item.hidden">

						<el-menu-item :index="item.id" v-if="!item.leaf">

							<i :class="item.iconCls"></i>
							<span v-text="item.name"></span>
							<el-badge :value="me.newTaskNum" v-if="item.id=='80'" class="item">
							</el-badge>



							<!--<el-menu-item v-for="child in item.children" :index="child.path" v-if="!child.hidden">
								<span v-text="child.name"></span>
								<el-badge :value="me.newTaskNum" v-if="child.id=='900200'" class="item">
								</el-badge>
							</el-menu-item>-->
						</el-menu-item>
						<!--<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>-->
					</template>
				</el-menu>
			</el-col>
			<el-col class="userinfo">
				<el-dropdown trigger="click">
					<span class="el-dropdown-link userinfo-inner"><img :src="sysUserAvatar" /> {{sysUserName}}</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item>我的消息</el-dropdown-item>
						<el-dropdown-item>设置</el-dropdown-item>
						<el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</el-col>
		</el-col>
		<el-col :span="24" class="main">
			<aside>
				<el-menu :default-active="leftId" class="el-menu-vertical-demo" theme="dark">


					<el-menu-item-group :key='item.id' v-for="(item,index) in leftMenuArray" v-if="!item.hidden">
						<template slot="title"><i :class="item.iconCls"></i>
							<span v-text="item.name"></span>
							<!--<el-badge :value="me.newTaskNum" v-if="item.id=='900'" class="item">
							</el-badge>-->
						</template>
						<div class="div_leftMenu">
							<el-menu-item :key='child.id' v-for="child in item.children" @click='selLeft(child)' :index="child.id" v-if="!child.hidden">

								<span style="margin-left:17px" v-text="child.name"></span>
								<el-badge :value="me.newTaskNum" v-if="child.id=='900200'" class="item">
								</el-badge>

							</el-menu-item>
						</div>

					</el-menu-item-group>
					<!--<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>-->

				</el-menu>
			</aside>
			<section class="content-container">
				<div class="grid-content bg-purple-light">
					<el-col :span="24" class="breadcrumb-container">
						<strong class="title">{{$route.name}}</strong>
						<el-breadcrumb separator="/" class="breadcrumb-inner">
							<el-breadcrumb-item :key='item.id' v-for="item in $route.matched">
								{{ item.name }}
							</el-breadcrumb-item>
						</el-breadcrumb>
					</el-col>
					<el-col :span="24" class="content-wrapper">
						<transition>
							<router-view   v-if="me"  :company="company"  :me='me'></router-view>
						</transition>

					</el-col>
				</div>
			</section>
		</el-col>
	</el-row>
</template>

<script src="./Home.js">

</script>



<style scoped lang="scss">
	.el-badge {

		margin-top: 5px;
	}

	.el-menu-demo {
		background-color: #1f2d3d
	}

	.div_leftMenu {
		margin-top: 10px
	}

	.div_leftMenu .el-menu-item {
		line-height: 40px;
		height: 40px;
	}

	.container {
		position: absolute;
		top: 0px;
		bottom: 0px;
		width: 100%;
		.header {
			height: 60px;
			line-height: 60px;
			background: #1F2D3D;
			color: #c0ccda;
			.userinfo {
				width: 120px;
				float: right;
				text-align: right;
				padding-right: 35px;
				.userinfo-inner {
					color: #c0ccda;
					cursor: pointer;
					img {
						width: 40px;
						height: 40px;
						border-radius: 20px;
						margin: 10px 0px 10px 10px;
						float: right;
					}
				}
			}
			.logo {
				margin-right: 20px;
				font-size: 22px;
				img {
					height: 40px;
					float: left;
					margin: 10px 0px 10px 10px;
				}
				.txt {
					color: #20a0ff;
					font-weight: normal;
				}
				span {
					font-size: 18px;
					margin-left: 10px
				}
			}
		}
		.main {
			background: #324057;
			position: absolute;
			top: 60px;
			bottom: 0px;
			overflow: hidden;
			aside {
				width: 230px;
			}
			.content-container {
				background: #f1f2f7;
				position: absolute;
				right: 0px;
				top: 0px;
				bottom: 0px;
				left: 230px;
				overflow-y: scroll;
				padding: 20px;
				.breadcrumb-container {
					margin-bottom: 15px;
					.title {
						width: 200px;
						float: left;
						color: #475669;
					}
					.breadcrumb-inner {
						float: right;
					}
				}
				.content-wrapper {
					background-color: #fff;
					box-sizing: border-box;
				}
			}
		}
	}
</style>